<template>
	<div class="app-container calendar-list-container">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 5px; margin-bottom: 25px; margin-left: 10px;">
            <el-breadcrumb-item v-for="(item, index) in breadList"><a href="javascript:;" @click="pushBread(item, index)">{{item.regionName}}</a></el-breadcrumb-item>
            <el-breadcrumb-item>成员列表</el-breadcrumb-item>
        </el-breadcrumb>
		<div class="filter-container">
			<el-form :inline="true" :model="screen" class="demo-form-inline">
				<el-form-item>
					<el-select v-model="screen.type" placeholder="请选择">
						<el-option label="代理商" value="1" v-if="region.level < 3"></el-option>
						<el-option label="导购员" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="screen.keyword" placeholder="请输入名称关键词"></el-input>
				</el-form-item>
				<el-form-item label="时间">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="screen.startTime" style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2" style="text-align: center;">-</el-col>
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="screen.endTime" style="width: 100%;"></el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onExport(0)">导出
						<i class="el-icon-printer el-icon--right"></i>
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" stripe :show-summary="screenKeyword == false" :summary-method="getSummaries" style="width: 100%" class="table-reserve">
			<el-table-column label='成员名称' width="180">
				<template slot-scope="scope">
					{{scope.row.region}}
				</template>
			</el-table-column>
			<el-table-column label="预订总数" width="120" align="center">
				<template slot-scope="scope">
					{{scope.row.reserveTotal}}
				</template>
			</el-table-column>
			<el-table-column label="取机总数" width="120" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.receiveTotal}}</span>
				</template>
			</el-table-column>
			<el-table-column label="取消数" width="120" align="center">
				<template slot-scope="scope">
					{{scope.row.cancelTotal}}
				</template>
			</el-table-column>
			<el-table-column label="转化率" width="120" align="center">
				<template slot-scope="scope">
					{{scope.row.conversionRate}}
				</template>
			</el-table-column>
			<div v-if="headPhone.length" v-for="(item, key) in headPhone">
				<el-table-column align="center" :label="item.phoneType+ '预订'">
					<template slot-scope="scope">
						<span v-if="typeof scope.row.phoneTypeList != 'undefined'">{{scope.row.phoneTypeList[key].reserveTotal}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" :label="item.phoneType+ '取机'">
					<template slot-scope="scope">
						<span v-if="typeof scope.row.phoneTypeList != 'undefined'">{{scope.row.phoneTypeList[key].receiveTotal}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" :label="item.phoneType+ '取消'">
					<template slot-scope="scope">
						<span v-if="typeof scope.row.phoneTypeList != 'undefined'">{{scope.row.phoneTypeList[key].cancelTotal}}</span>
					</template>
				</el-table-column>
			</div>
			<el-table-column label="操作" min-width="250">
				<template slot-scope="scope">
					<el-button size="mini" plain v-if="scope.row.level <= 3" @click="nextRegion(scope.row)">成员预订信息</el-button>
					<el-button size="mini" type="primary" plain @click="onExport(scope.row)"><i class="el-icon-document"></i> 导出</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-container" style="text-align: center; margin-top: 30px;">
			<el-pagination :current-page="page.offset" :total="page.total" layout="prev, pager, next" @current-change="handleCurrentChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'complexTable',
		data() {
			return {
                listLoading: true,
                breadList: [], //面包屑
                headPhone: [],
				screen: {
					type: '1',
					keyword: '',
					startTime: '',
					endTime: '',
                },
                screenKeyword: false, //筛选关键字
				page: {
					pageSize: 10,
					offset: 1,
					total: 0
				},
				region: { //区域信息
					regionId: '',
					regionName: '',
					level: ''
				},
                list: [],
                listHead: {}
			}
		},
		methods: {
            getSummaries(param) { // 汇总数据
                const head = this.listHead
                let rows = []

                rows[0] = typeof head.receiveTotal == 'undefined' ? '' : head.member
                rows[1] = typeof head.receiveTotal == 'undefined' ? '' : head.reserveTotal
                rows[2] = typeof head.receiveTotal == 'undefined' ? '' : head.receiveTotal
                rows[3] = typeof head.cancelTotal == 'undefined' ? '' : head.cancelTotal
                rows[4] = typeof head.conversionRate == 'undefined' ? '' : head.conversionRate

                let arr = head.phoneTypeList
                if (typeof arr != 'undefined') {
                    for (var i=0; i<arr.length; i++) {
                        rows[5 + i*3] = arr[i].reserveTotal
                        rows[6 + i*3] = arr[i].receiveTotal
                        rows[7 + i*3] = arr[i].cancelTotal
                    }
                }
                return rows
            },
			onSubmit() {
				this.page.offset = 1
				Promise.all([
                    this.fetchDataHead(),
                    this.fetchData()
                ]).then((res) => {
                    if (this.screen.keyword.length > 0) {
                        this.screenKeyword = true
                    } else {
                        this.screenKeyword = false
                    }
                })
			},
			onExport(option) {
                this.checkExport().then((res) => {
                    if (option == 0) {
                        this.Export()
                    } else { // 成员导出
                        let data = {
                            regionId: option.id,
                            level: option.level,
                            type: '',
                            keyword: '',
                            startTime: this.screen.startTime,
                            endTime: this.screen.endTime
                        }
                        this.Export(data)
                    }
                })
            },
            checkExport() {
                return new Promise((resolve, reject) => {
					let data = {
						startTime: this.screen.startTime,
						endTime: this.screen.endTime
					}
					this.listLoading = true
					this.$axios({
						url: '/reservephone/admin/Orders/checkExportData.json',
						method: 'post',
						data: this.$qs.stringify(data)
					}).then((res) => {
						this.listLoading = false
						if (res.status === true || res.status === 'true') {
                            resolve(res)
                        }
					}).catch((err) => {
						this.listLoading = false
						reject(err)
					})
				})
            },
            Export(option) {
                let data = {
                    regionId: this.region.regionId,
                    level: this.region.level,
                    type: this.screen.type,
                    keyword: this.screen.keyword,
                    startTime: this.screen.startTime,
                    endTime: this.screen.endTime
                }
                if (typeof option === 'object') {
                    data = option
                }
                data = this.$qs.stringify(data)

                let url = '/reservephone/admin/Orders/exportReserveSumData.htm?' + data
                location.href = url
            },
			handleCurrentChange(val) {
				this.page.offset = val
				this.fetchData()
            },
            pushBread(region, index) {
                this.breadList = this.breadList.slice(0, index+1)
                this.region = region
                this.screen = {
					type: this.region.level < 3 ? '1' : '2', // 门店只能筛选店员
					keyword: '',
					startTime: '',
					endTime: '',
                }
                this.screenKeyword = false
                this.page.offset = 1
                Promise.all([
                    this.fetchDataHead(),
                    this.fetchData()
                ])
            },
			nextRegion(scope) {
				this.region = {
					regionId: scope.id,
					regionName: scope.region,
					level: scope.level
                }
                this.screen = {
                    type: this.region.level < 3 ? '1' : '2', // 门店只能筛选店员
					keyword: '',
					startTime: '',
					endTime: '',
                }
                this.screenKeyword = false
                this.page.offset = 1
				Promise.all([
                    this.fetchDataHead(),
                    this.fetchData()
                ]).then((res) => {
                    this.breadList.push(this.region)
                })
			},
			fetchDataHead() {
				return new Promise((resolve, reject) => {
					let data = {
						regionId: this.region.regionId,
						level: this.region.level,
						startTime: this.screen.startTime,
						endTime: this.screen.endTime,
					}
					this.listLoading = true
					this.$axios({
						url: '/reservephone/admin/Orders/reserveSumData.json',
						method: 'post',
						data: this.$qs.stringify(data)
					}).then((res) => {
                        this.listLoading = false

                        if (res.status === true || res.status === 'true') {
                            this.headPhone = res.data.phoneTypeList
                            this.listHead = res.data
                            resolve(res)
                        }
					}).catch((err) => {
						this.listLoading = false
						reject(err)
					})
				})
			},
			fetchData(option) {
				return new Promise((resolve, reject) => {
					let page = {
						offset: this.page.offset,
						pageSize: this.page.pageSize
					}
					let region = {
						regionId: this.region.regionId,
						level: this.region.level
					}
					let data = Object.assign({}, page, region, this.screen)
                    if (typeof option === 'object') {
                        data = Object.assign({}, data, option)
                    }
					this.listLoading = true
					this.$axios({
						url: '/reservephone/admin/Orders/queryReserveSumData.json',
						method: 'post',
						data: this.$qs.stringify(data)
					}).then((res) => {
                        this.listLoading = false
                        
                        if (res.status === true || res.status === 'true') {
                            this.list = res.data.rows
                            this.page.total = res.data.total
                            resolve(res)
                        }
					}).catch(() => {
						this.listLoading = false
						reject(err)
					})
				})
            },
            setRegion() {
				this.region = { //区域信息
					regionId: this.$store.state.user.info.id,
					regionName: this.$store.state.user.info.region,
					level: this.$store.state.user.info.level
                }
                this.breadList[0] = this.region
			}
		},
		created() {
            this.setRegion()
			Promise.all([
				this.fetchDataHead(),
				this.fetchData()
			])
		}
	}

</script>
